<template>
  <div class="current-weather-container">
    <div class="weather-wrapper">
      <div class="current-weather">
        <div class="location">
          <i class="el-icon-location"></i>
          <span>{{ districtName }}</span>
          <span class="update-time">更新时间: {{ updateTime }}</span>
        </div>
        <div class="weather-info">
          <img :src="getWeatherIcon(weatherData?.text || '未知')" class="weather-icon" />
          <div class="temperature">{{ weatherData?.temp || "--" }}°C</div>
          <div class="feels-like">体感温度 {{ weatherData?.feels_like || "--" }}°C</div>
          <div class="weather-text">{{ weatherData?.text || "未知" }}</div>
          <div class="temp-change" v-if="weatherData?.temp_change">
            <i class="el-icon-top" v-if="weatherData.temp_change > 0"></i>
            <i class="el-icon-bottom" v-if="weatherData.temp_change < 0"></i>
            <span>较昨日{{ Math.abs(weatherData.temp_change) }}°C</span>
          </div>
          <div class="weather-tips" v-if="weatherData?.tips">
            <i class="el-icon-info"></i>
            <span>{{ weatherData.tips }}</span>
          </div>
        </div>
        <div class="weather-details">
          <div class="detail-card">
            <i class="el-icon-wind-power"></i>
            <span>{{ weatherData?.wind_dir || "--" }} {{ weatherData?.wind_class || "--" }}</span>
          </div>
          <div class="detail-card">
            <i class="el-icon-water-drop"></i>
            <span>湿度 {{ weatherData?.rh || "--" }}%</span>
          </div>
          <div class="detail-card">
            <i class="el-icon-view"></i>
            <span
              >能见度 {{ weatherData?.vis ? (weatherData.vis / 1000).toFixed(1) : "--" }}km</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import sunnyIcon from "../../../assets/images/weather-icons/sunny.png";
import cloudyIcon from "../../../assets/images/weather-icons/cloudy.png";
import overcastIcon from "../../../assets/images/weather-icons/overcast.png";
import lightRainIcon from "../../../assets/images/weather-icons/light-rain.png";
import moderateRainIcon from "../../../assets/images/weather-icons/moderate-rain.png";
import heavyRainIcon from "../../../assets/images/weather-icons/heavy-rain.png";
import stormIcon from "../../../assets/images/weather-icons/storm.png";
import snowIcon from "../../../assets/images/weather-icons/snow.png";
import fogIcon from "../../../assets/images/weather-icons/fog.png";
import unknownIcon from "../../../assets/images/weather-icons/unknown.png";

interface WeatherNow {
  temp: number;
  feels_like: number;
  rh: number;
  wind_class: string;
  wind_dir: string;
  text: string;
  uptime: string;
  temp_change?: number;
  tips?: string;
}

const props = defineProps<{
  weatherData?: WeatherNow;
  districtName: string;
  updateTime: string;
}>();

const getWeatherIcon = (text: string) => {
  const iconMap: Record<string, string> = {
    晴: sunnyIcon,
    多云: cloudyIcon,
    阴: overcastIcon,
    小雨: lightRainIcon,
    中雨: moderateRainIcon,
    大雨: heavyRainIcon,
    暴雨: stormIcon,
    雪: snowIcon,
    雾: fogIcon,
  };
  return iconMap[text] || unknownIcon;
};
</script>

<style lang="scss" scoped>
.current-weather-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .weather-wrapper {
    height: calc(100vh - 200px);
    width: 100%;
    background-color: #fff;
    color: white;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .current-weather {
      text-align: center;
      padding: 20px;
      background: linear-gradient(135deg, #409eff 0%, #1e88e5 100%);
      border-radius: 10px;
      height: 100%;

      .location {
        font-size: 24px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        .update-time {
          font-size: 14px;
          opacity: 0.8;
        }
      }

      .weather-info {
        margin-bottom: 40px;

        .weather-icon {
          width: 120px;
          height: 120px;
          margin-bottom: 20px;
          filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
        }

        .temperature {
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 10px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .weather-text {
          font-size: 24px;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .temp-change {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          margin-top: 10px;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.9);

          i {
            font-size: 18px;
            &.el-icon-top {
              color: #ff6b6b;
            }
            &.el-icon-bottom {
              color: #4ecdc4;
            }
          }
        }

        .weather-tips {
          margin-top: 15px;
          padding: 10px 20px;
          background: rgba(255, 255, 255, 0.15);
          border-radius: 20px;
          backdrop-filter: blur(5px);
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.95);
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
          }

          i {
            color: #ffd93d;
            font-size: 16px;
          }

          span {
            line-height: 1.4;
          }
        }
      }

      .weather-details {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 20px;
        padding: 0 20px;
        height: 15%;

        .detail-card {
          background: rgba(255, 255, 255, 0.1);
          padding: 15px 20px;
          border-radius: 8px;
          flex: 1;
          transition: all 0.3s ease;
          height: 100%;

          &:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
          }

          i {
            font-size: 24px;
          }

          span {
            font-size: 14px;
            white-space: nowrap;
          }
        }
      }
    }
  }

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}
</style>
